<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑酷游戏</title>
    <style>
        #game-container {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 50px;
        }

        #obstacle {
            width: 30px;
            height: 30px;
            background-color: red;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>跑酷游戏</h1>
    <div id="game-container">
        <div id="player"></div>
        <div id="obstacle"></div>
        <div id="score">得分: 0</div>
    </div>
    <button id="jump-button">跳跃</button>
    <script>
        const player = document.getElementById('player');
        const obstacle = document.getElementById('obstacle');
        const scoreDiv = document.getElementById('score');
        const jumpButton = document.getElementById('jump-button');

        let playerY = 0;
        let obstacleX = 800;
        let score = 0;
        let isJumping = false;

        jumpButton.addEventListener('click', function () {
            if (!isJumping) {
                isJumping = true;
                let jumpHeight = 0;
                const jumpInterval = setInterval(() => {
                    if (jumpHeight < 150) {
                        jumpHeight += 10;
                        player.style.bottom = jumpHeight + 'px';
                    } else {
                        clearInterval(jumpInterval);
                        const fallInterval = setInterval(() => {
                            if (jumpHeight > 0) {
                                jumpHeight -= 10;
                                player.style.bottom = jumpHeight + 'px';
                            } else {
                                clearInterval(fallInterval);
                                isJumping = false;
                            }
                        }, 20);
                    }
                }, 20);
            }
        });

        const gameInterval = setInterval(() => {
            obstacleX -= 5;
            obstacle.style.right = (800 - obstacleX) + 'px';

            if (obstacleX < 0) {
                obstacleX = 800;
                score++;
                scoreDiv.textContent = `得分: ${score}`;
            }

            const playerRect = player.getBoundingClientRect();
            const obstacleRect = obstacle.getBoundingClientRect();

            if (
                playerRect.left < obstacleRect.right &&
                playerRect.right > obstacleRect.left &&
                playerRect.top < obstacleRect.bottom &&
                playerRect.bottom > obstacleRect.top
            ) {
                // 发生碰撞，发送请求到后端
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'game_logic.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        alert('游戏结束！最终得分: ' + score);
                        clearInterval(gameInterval);
                    }
                };
                xhr.send('score=' + score);
            }
        }, 20);
    </script>
</body>

</html>